<template>
  <div class="home">
    <top-view/>
    <sales-view/>
    <bottom-view/>
    <map-view/>
  </div>
</template>

<script>
    import TopView from '../components/TopView'
    import SalesView from '../components/SalesView'
    import MapView from '../components/MapView'
    import BottomView from '../components/BottomView'
    import {apiWordCloud, apiReportData,apiMapdata} from '../api'

    export default {
        name: 'Home',
        components: {
            TopView, SalesView, MapView, BottomView
        },
        methods:{
          getWordCloud(){
              return this.wordCloud
          },
          getReportData(){
              return this.reportData
          },
          getMapData(){
              return this.mapData
          }
        },
        // 提供属性透传 - Attribute transparent transmission
        // 此类属性都以 att 开头，既是取 Attribute 的前面3个字符
        // 也是取三个单词的首字符
        provide() {
            return {
                attReportData: this.getReportData,
                attWordCloud: this.getWordCloud,
                attMapData: this.getMapData,
            }
        },
        data() {
            return {
                reportData: null,
                wordCloud: null,
                mapData: null,
            }
        },
        mounted() {
            // 下面的方法来自 src/api/index.js 中导出的方法
            apiWordCloud().then(data => this.wordCloud = data),
            apiReportData().then(data => this.reportData = data),
            apiMapdata().then(data => this.mapData = data)
        }
    }
</script>

<style>
  /** 设置主要样式 */
  .home {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #eee;
    box-sizing: border-box;
  }
</style>
